<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>



<!--https://element.eleme.cn/#/zh-CN/component/message-box -->
<div id="app7" style="font-size: 14px">
	<template>
		<el-button type="primary" @click="open" >询问窗</el-button>
	</template>
</div>

<script type="text/javascript">
	//组件初始化
	var Main = {
		methods: {
			open() {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
		        }).then(() => {//确定按钮的事件
		        	console.log('yes');
		        	this.$message({
		        		type: 'success',
		        		message: '删除成功!'
		        	});
		        }).catch(() => {//取消按钮的事件
		        	console.log('no');
		        	this.$message({
		        		type: 'info',
		        		message: '已取消删除'
		        	});          
		        });
	    	}
		}
	}
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app7');
	//为演示，初始化一次点击事件
	$('.el-button').click();
</script>